<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的课程 - 搜索</title>
    <th:block th:include="include :: header('我的课程')" />
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="search-form">
                        <form action="#">
                            <div class="input-group">
                                <input type="text" placeholder="搜索课程" name="search" id="search" class="form-control input-lg">
                                <div class="input-group-btn">
                                    <button class="btn btn-lg btn-primary" id="refresh" type="button">
                                        搜索
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="row">

                        <div class="col-sm-12 animated">
                            <div class="row">
                                <div class="col-sm-12" id="comment">

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="text-center">
                        <div class="btn-group" id="page-group">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<!-- 自定义js -->
<script th:src="@{/js/content.js}"></script>
<script th:inline="javascript">
    $(document).ready(function () {
        $('.file-box').each(function () {
            animationHover(this, 'pulse');
        });
        dynamicData(1);
    })

    <!--与服务器进行交互-->
    var comment = $('#comment');
    $('#refresh').click(function () {
        dynamicData(1);
    });

    var pageH = $('#page-group');
    var userName = [[${userName}]];
    function dynamicData(pageNum) {
        comment.children().remove();
        pageH.children().remove();
        var url = ctx + 'edu/stuCourse/list';
        var title = $("#search").val();
        $.ajax({
                type: 'post',
                url: url,
                data: {
                    "pageNum": pageNum,
                    "pageSize": 20,
                    "courseName":title,
                    "userName":userName,
                },
                success: function (result) {//回调函数,result与上面load参数的类似，可以是jsp文件的路径
                    if (result.code == 0) {
                        var html = '';
                        result.rows.forEach(function (value, index) {
                            html += '<div class="file-box">'
                            html += ' <div class="file">';
                            html += ' <a href="javascript:void(0)" onclick="openFun('+value.courseId+')">';
                            html += '<span class="corner"></span>';
                            html += '<div class="image">';
                            html += '<img alt="image" class="img-responsive" src="' + value.image + '">';
                            html += '</div>';
                            html += '<div class="file-name">';
                            html += value.courseName;
                            html += '<br/>';
                            html += '<small>' + value.deptName + ': ' + value.teacher + '</small>';
                            html += '</div>';
                            html += '</a>';
                            html += '</div>';
                            html += '</div>';
                        })
                        $("#comment").append(html);

                        var pageHtml = '';
                        pageHtml += '<button class="btn btn-white" type="button"><i class="fa fa-chevron-left"></i></button>';

                        result.pageArray.forEach(function (value,index) {
                            if (index+1 == result.pageNum) {
                                pageHtml += '<button class="btn btn-white  active" type="button" onclick="test('+value+');">' + value + '</button>';
                            } else {
                                pageHtml += '<button class="btn btn-white"  type="button" onclick="test('+value+');">' + value + '</button>';
                            }
                        })
                        pageHtml += '<button class="btn btn-white" type="button"><i class="fa fa-chevron-right"></i></button>';
                        $("#page-group").append(pageHtml);
                    }
                }
            }
        );
    }

    function test(e) {
        dynamicData(e)
    }

    function openFun(id){
        var url = ctx + 'edu/course/video';
        $.modal.openTab('播放列表', url + "?id="+id);
    }

</script>
</body>

</html>

